<template>
  <div class="display-container">
    <!-- 弹出层  发布动态 -->
    <van-popup
     v-model="show1"
      position="right"
      :overlay="true"
      closeable
      close-icon-position="top-left"
      :style="{width:'100%',height:'100%'}"
    >
      <!-- 切换联赛组件 -->
      <ReleaseyDnamics></ReleaseyDnamics>
    </van-popup>

    <!-- 弹出层  切换联赛 -->
    <van-popup
     v-model="show"
      position="right"
      :overlay="true"
      closeable
      close-icon-position="top-left"
      :style="{width:'100%',height:'100%'}"
    >
      <!-- 切换联赛组件 -->
      <SwitchLeague></SwitchLeague>
    </van-popup>

    <!-- 导航栏 -->
    <van-nav-bar title="球场动态"  class="TopNav">
      <template #left>
        <van-icon name="exchange" size="18" color="white" @click="showPopup"/>
      </template>
      <template #right>
        <van-icon name="plus" size="18" color="white" @click="showPopup1"/>
      </template>
    </van-nav-bar>
    <!-- 头部搜索框 -->
    <div class="nav">
      <van-search
        v-model="value"
        shape="round"
        placeholder="请输入搜索关键词"
        @keypress="serch({value},$event)"
      />
    </div>
    <div class="content">
      <!-- 关注和联赛动态 -->
      <van-tabs v-model="activeName" >
        <van-tab title="关注" name="a">
          <!-- 关注的内容 -->
          <div class="follow_container" v-for="(value,index) in this.displayimg" :key="index">
            <p class="bgain">{{ value.text }}</p>
            <div class="follow_content">
              <!-- 图片内容 -->
              <van-grid square :gutter="15" :column-num="3">
                <van-grid-item v-for="(item,itemindex) in value.imglist" :key="itemindex" :icon="item.content" />
              </van-grid>
            </div>
            <div class="follow_info">
              <span class="follow_info_img">
                <van-image
                  round
                  width="8vw"
                  height="8vw"
                  :src="require('@/images/serve/userlogo/my1.png')"
                />
              </span>
              <span class="follow_info_text">
                <span> 杜长江 </span>
              </span>
            </div>
          </div>
        </van-tab>

        <van-tab title="联赛动态" name="b">
          <!-- 联赛动态的内容 -->
          <div class="follow_container" v-for="(value1,index) in this.displayimg1" :key="index">
            <p class="bgain">{{ value1.text }}</p>
            <div class="follow_content">
              <!-- 图片内容 -->
              <van-grid square :gutter="15" :column-num="3">
                <van-grid-item v-for="(item,itemindex) in value1.imglist" :key="itemindex" :icon="item.content" />
              </van-grid>
            </div>
            <div class="follow_info">
              <span class="follow_info_img">
                <van-image
                  round
                  width="8vw"
                  height="8vw"
                  :src="value1.userpic"
                />
              </span>
              <span class="follow_info_text">
                <span>{{ value1.username }}</span>
              </span>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import SwitchLeague from '@/components/Switch_League/Switch_League.vue'
import ReleaseyDnamics from '@/components/ReleaseyDnamics/ReleaseyDnamics.vue'
import { mapState } from 'vuex'

export default {
  name: 'view_display',
  data () {
    return {
      show: false,
      show1: false,
      imgs: '',
      a: false,
      personal_Info: JSON.parse(window.localStorage.getItem('user_info')),
      activeName: 'a',
      value: '',
      newArray: []
    }
  },
  methods: {
    serch(data) {
      // console.log(data.value)
      for (let i = 0; i < this.displayimg1.length - 1; i++) {
        if (this.displayimg1[i].username === data.value) {
          console.log(this.displayimg1[i])
        }
      }
    },
    showPopup () {
      this.show = true
    },
    showPopup1 () {
      this.show1 = true
      // console.log(this.logoindex)
      this.a = true
      // this.personal_Info = JSON.parse(window.localStorage.getItem('user_info'))
      console.log(this.personal_Info)
    }
    // 查询
  },
  computed: {
    ...mapState(['CreateLeague', 'displayimg', 'displayimg1'])
  },
  components: {
    SwitchLeague,
    ReleaseyDnamics
  }

}
</script>

<style scoped>
*{
  margin: 0;
  padding: 0;
}
.display-container{
  height: 90%;
}
.TopNav {
  background-color: black;
}
::v-deep .van-nav-bar__title{
  color: rgb(255, 255, 255);
}
.van-search{
  position: relative;
  width: 95%;
  margin: 2vw auto;
  text-align: center;
  background-color: rgb(173, 173, 173);
  border-radius:2vw ;

}
::v-deep .van-search input{
  text-align: center;
  color: white;

}
 ::v-deep .van-icon-search{
  position: absolute;
  left: 30%;
  transform: translateX(-50%);
  color: white;
}

.van-cell--borderless{
  background-color: rgb(182, 182, 182);
  border-radius:2vw ;
}
.content{
  width: 100%;
  margin: 0 auto;
}
.bgain{
  /* background-color: aqua; */
  margin: 2vw 0 0 4vw;
  height: 8vw;
  line-height: 8vw;

}
::v-deep .van-tabs__content{
  margin: 0 auto;
  width: 95%;
  background-color: rgb(240, 240, 240);
}
.follow_container{
  margin-top: 2vw;
  background-color: rgb(255, 255, 255);
}
.follow_info{
  border-top: 1px solid rgb(231, 231, 231);
  position: relative;
  /* background-color: blueviolet; */
}
.follow_info span{
  margin-left: 4vw;

}
.follow_info span span{
  height: 100%;
  line-height: 4vw;

}
.follow_info_text{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
::v-deep .van-grid-item__content{
  overflow: hidden;
}
::v-deep .van-icon__image{
  height: 100%;
  width: 100%;
  object-fit: cover;
}
</style>
